import React, { useEffect, useState } from 'react'
import { createWebSocket, closeWebSocket, sendmsg, websocket } from '@/utils/websocket'
import '../assest/weChat/css/bootstrap-datepicker.min.css'
import '../assest/weChat/css/css2.css'
import '../assest/weChat/css/css21.css'
import '../assest/weChat/css/css22.css'
import '../assest/weChat/css/css23.css'
import '../assest/weChat/css/material-design-iconic-font.min.css'
import '../assest/weChat/css/style.min.css'
export default function () {
    let [topdata, setTopdata]: any = useState([])

    useEffect(() => {
        let url = 'ws://localhost:10000/basic'
        createWebSocket(url)
        // return () => {
        //     closeWebSocket()
        // }


    }, [])
    websocket.onmessage = function (event: any) {

        console.log(event.data);

        //event 为服务端传输的消息，在这里可以处理
        setTopdata([...topdata, event.data])
        console.log(topdata);

    }
    function firesend() {
        websocket.send('sss2')

    }



    return (
        <div>
            <div>
                <div className="main px-xl-5 px-lg-4 px-3">

                    <div className="chat-body">



                        <div className="collapse" id="chat-search-div">
                            <div className="container-xxl py-2">
                                <div className="input-group">
                                    <input type="text" className="form-control" placeholder="Find messages in current conversation" />
                                    <div className="input-group-append">
                                        <span className="input-group-text text-muted">0 / 0</span>
                                    </div>
                                    <div className="input-group-append">
                                        <button type="button" className="btn btn-secondary">Search</button>
                                        <button type="button" className="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span className="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <div className="dropdown-menu dropdown-menu-right shadow border-0">
                                            <a className="dropdown-item" href="#">Action</a>
                                            <a className="dropdown-item" href="#">Another action</a>
                                            <a className="dropdown-item" href="#">Something else here</a>
                                            <div role="separator" className="dropdown-divider"></div>
                                            <a className="dropdown-item" href="#">Separated link</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="chat-content">
                            <div className="container-xxl">
                                <ul className="list-unstyled py-4">
                                    {topdata.map((item: string) =>
                                        item ? (item.split(',')[0].slice(-1) == '1' ? <li className="d-flex message">

                                            <div className="mr-lg-3 me-2">
                                                <img className="avatar sm rounded-circle" src="static/picture/avatar5.jpg" alt="avatar" />
                                            </div>

                                            <div className="message-body">
                                                <span className="date-time text-muted">{item.split(',')[1]}</span>
                                                <div className="message-row d-flex align-items-center">

                                                    <div className="message-content p-3">
                                                        Hello, <br />{item.split(',')[0]}
                                                    </div>

                                                    <div className="dropdown">
                                                        <a className="text-muted ms-1 p-2 text-muted" href="#" data-toggle="dropdown"
                                                            aria-haspopup="true" aria-expanded="false">
                                                            <i className="zmdi zmdi-more-vert"></i>
                                                        </a>

                                                    </div>

                                                </div>
                                            </div>
                                        </li> : <li className="d-flex message right">
                                            <div className="message-body">
                                                <span className="date-time text-muted">{item.split(',')[1]} <i
                                                    className="zmdi zmdi-check-all text-primary"></i></span>
                                                <div className="message-row d-flex align-items-center justify-content-end">

                                                    <div className="dropdown">
                                                        <a className="text-muted me-1 p-2 text-muted" href="#" data-toggle="dropdown"
                                                            aria-haspopup="true" aria-expanded="false">
                                                            <i className="zmdi zmdi-more-vert"></i>
                                                        </a>

                                                    </div>


                                                    <div className="message-content border p-3">
                                                        {item.split(',')[0]}
                                                    </div>
                                                </div>
                                            </div>
                                        </li>) : <></>

                                    )}










                                </ul>
                            </div>
                        </div>
                        <div className="chat-footer border-top py-xl-4 py-lg-2 py-2">
                            <div className="container-xxl">
                                <div className="row">
                                    <div className="col-12" >
                                        <div className="input-group align-items-center DWXINPUT"  ><input type="text"
                                            className="form-control border-0 pl-0" placeholder="Type your message..." />
                                            <div className="input-group-append d-none d-sm-block"><span
                                                className="input-group-text border-0"><button className="btn btn-sm btn-link text-muted"
                                                    data-toggle="tooltip" title="Refresh" type="button"><i
                                                        className="zmdi zmdi-refresh font-22"></i></button></span></div>
                                            <div className="input-group-append"><span className="input-group-text border-0"><button
                                                className="btn btn-sm btn-link text-muted" data-toggle="tooltip" title="Smaily"
                                                type="button"><i className="zmdi zmdi-mood font-22"></i></button></span></div>
                                            <div className="input-group-append"><span className="input-group-text border-0">
                                                <button
                                                    className="btn btn-sm btn-link text-muted" data-toggle="tooltip"
                                                    title="Attachment" type="button"><i
                                                        className="zmdi zmdi-attachment font-22" onClick={firesend}></i></button></span></div>
                                            <div className="input-group-append"><span className="input-group-text border-0 pr-0"><button
                                                type="submit" className="btn btn-primary">
                                                <span className="d-none d-md-inline-block me-2">Send</span><i
                                                    className="zmdi zmdi-mail-send"></i></button></span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>




    )
}
